<template>
  <div class="business_see">
    <titleDiv
      :title="title"
      :isShow="true"
      text1="创建人："
      text2="创建时间："
      :value1="obj.name"
      :value2="obj.creatTime"
    ></titleDiv>
    <div class="main">
      <el-form ref="form"  label-width="100px">
        <el-form-item label="主业务名称：">
          <div class="textInner">{{obj.businessName}}</div>
        </el-form-item>
        <el-form-item label="业务描述：">
          <div  class="textInner">
            <ul>
							<li v-for="(item,index) in contArr" :key="index">{{item}}</li>
						</ul>
          </div>
        </el-form-item>
        <el-button class="btn" type="primary" @click="goLink('/business/businessedit',obj.id)">编辑</el-button>
        <el-button :disabled="disabled" class="btn btnsc" type="primary" @click="handleDelete(obj.id)">删除</el-button>
      </el-form>
    </div>
  </div>
</template>
<script>
  import titleDiv from './view/titleDiv.vue'
	import {businessDetail,deleteBusiness,orgDetailBusiness} from '../api/getData.js'
  export default {
    name: 'business_see',
    data: function () {
      return {
        title:"业务类型详情",
        name:'',
        time:'',
				businessId:'',
				obj:{},
				contArr:[],
				disabled:false
      }
    },
    components:{
      titleDiv
    },
    created() {
			this.getParams()
		}, // 创建时
    beforeMount: function () {}, // 挂载之前
		beforeRouteEnter(to, from, next){
			console.log(from.path)
			if(from.path =="/business/businessechoose"){
				next(vm=>{
					// console.log(vm)
					vm.getOrgDetail()
					vm.disabled = true
					// 每次进入路由执行
				})
			}else{
				next(vm=>{
					// console.log(vm)
					vm.getDetail()
				})
			}
			
		},
    mounted() {
			
		}, // 挂载之后
    beforeUpdate: function () {}, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用
    methods: {
			getParams(){
				console.log(this.$route.query.id,"传来的参数")
				this.businessId = this.$route.query.id 
			},
			// 获取机构业务详情
			getOrgDetail(){
				orgDetailBusiness({
					id:this.businessId
				}).then((res) =>{
					console.log(res.data,"获取机构业务类型")
					if(res.data.code == 0){
						this.obj = res.data.data
						this.contArr = res.data.data.businessDescription.split("\n")
					}
				}).catch((error) =>{
					console.log(error)
				})
			},
			// 获取网点业务详情
			getDetail(){
				businessDetail({
					id:this.businessId
				}).then((res) =>{
					console.log(res.data,"获取网点业务类型")
					this.obj = res.data.data
					this.contArr = res.data.data.businessDescription.split("\n")
				}).catch((error) =>{
					console.log(error)
				})
			},
			goLink (url,id) {
				this.$router.push({
					path:url,
					query:{
						id:id
					}
				})
			},
			handleDelete (id) {
				this.$confirm('请再次确认是否删除?','提示',{
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					// type: 'warning'
				}).then(()=>{
					deleteBusiness({
						id:id
					}).then((res) =>{
						console.log(res.data,"删除业务类型")
						if(res.data.code == 0){
							this.$message({
								message:'删除成功',
								type:'success'
							})
							this.$router.push('/business/businessindex')
						}else{
							this.$message.error(res.data.msg)
						}
					}).catch((error) =>{
						console.log(error)
					})
				}).catch(()=>{
					this.$message({
						type: 'info',
						message: '已取消删除' 
					});  
				})
			},
		} // 函数
  }
</script>
<style lang='scss'>
  .business_see {
    box-sizing: border-box;
    .main{
      background: #fff;
      width: 100%;
      margin-top: 3%;
      padding: 5% 20%;
      .textInner{
        color: #808492;
        font-size: 14px;
      }
			.el-form-item{
				margin-bottom: 0px;
			}
      .el-form-item__label{
        font-weight: bold;
      }
      .btn{
        width: 120px;
        height:32px;
        line-height: 1px;
        margin-left: 100px;
				margin-top: 40px;
      }
      .btnsc{
        background-color: #fff;
        border:1px solid #ccc;
        color: #ccc;
      }
    }
  }
</style>
